<template>
  <div class="register">
    <div class="register__container">
      <div class="register__title">register</div>
      <div class="register__form">
        <van-form @submit="onSubmit">
          <van-cell-group inset>
            <van-field
              v-model="username"
              name="用户名"
              label="用户名"
              placeholder="用户名"
              :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <van-field
              v-model="password"
              type="password"
              name="密码"
              label="密码"
              placeholder="密码"
              :rules="[{ required: true, message: '请填写密码' }]"
            />
            <van-field
              v-model="password2"
              type="password"
              name="确认密码"
              label="密码"
              placeholder="再次输入密码"
              :rules="[{ required: true, message: '请再次填写密码' }]"
            />
            <van-field
              v-model="email"
              type="email"
              name="邮箱"
              label="邮箱"
              placeholder="邮箱"
              :rules="[{ required: true, message: '请再次填写密码' }]"
            />
            <van-field
              v-model="sms"
              center
              clearable
              label="验证码"
              placeholder="请输入邮箱验证码"
            >
              <template #button>
                <van-button
                  size="small"
                  type="primary"
                  @click="handleCode"
                  color="#d4f8fb"
                  >发送验证码</van-button
                >
              </template>
            </van-field>
          </van-cell-group>

          <div style="margin: 16rem">
            <van-button
              class="shadow"
              round
              color="#d4f8fb"
              native-type="submit"
              block
              type="primary"
            >
              提交
            </van-button>
          </div>
        </van-form>
      </div>
      <router-link
        style="
          font-size: 12rem;
          color: var(--shadow-color);
          text-decoration: underline;
        "
        to="/login"
        >to login</router-link
      >
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { showDialog } from "vant";
import { getCode, addUser } from "@/api";
import "vant/es/dialog/style";
const username = ref("");
const password = ref("");
const password2 = ref("");
const sms = ref("");
const email = ref("");
const onSubmit = async (values) => {
  if (password.value !== password2.value) {
    showDialog({
      title: "密码不一致,请重新输入",
      confirmButtonColor: "#ffcd41",
    });
    return;
  }
  const data = await addUser({
    username: username.value,
    password: password.value,
    email: email.value,
    code: sms.value,
  });
  showDialog({
    title: data.msg,
    confirmButtonColor: "#d4f8fb",
  });
  if (!data.data) return;
  username.value = "";
  password.value = "";
  password2.value = "";
};
const handleCode = async () => {
  const code = await getCode(username.value, email.value);
};
</script>

<style lang="scss">
.register {
  font-size: 16rem;
  height: 100vh;
  @include flex(column, center, center);
  background-color: var(--background-color);
  color: var(--font-color);

  .van-field__label {
    width: 50rem;
  }

  &__container {
    @include flex(column, center, center);
    width: 80%;
    padding: 40rem 10rem;
    border-radius: 20rem;

    .van-cell,
    .van-field__label,
    .van-field__control {
      background-color: var(--background-color);
      color: var(--shadow-color);
    }
  }

  .shadow {
    border: 1px solid var(--shadow-color) !important;
  }

  .shadow:active {
    border: none;
    box-shadow: 1px 1px var(--shadow-color), -1px -1px var(--shadow-color);
  }

  &__title {
    text-shadow: 2px 2px var(--shadow-color), -2px -2px var(--shadow-color);
    font-size: 64rem;
    font-weight: bold;
    margin-bottom: 32rem;
    color: $color-blue;
  }
}
</style>
